<template>
	<view class="container" @click="isShowSetting=false">
		<view class="fixed-settting" v-if="isShowSetting">
			<view class="setting-item" @click="jump(1)">
				<image src="https://images.linglinggong.net/static/message/message6.png" mode=""></image>
				<text>联系客服</text>
			</view>
			<view class="setting-item" @click="readed()">
				<image src="https://images.linglinggong.net/static/message/message7.png" mode=""></image>
				<text>一键已读</text>
			</view>
			<view class="setting-item" @click="jump(2)">
				<image src="https://images.linglinggong.net/static/message/message8.png" mode=""></image>
				<text>消息设置</text>
			</view>
		</view>
		<view class="head-list">
			<view :class="[currentIndex==index?'active':'','head-item']" v-for="(item,index) in titleList"
				@click="handleTypeChange(index)">
				<view v-if="index==0&&notifyRedDot==true||index==1&&activityRedDot==true||index==2&&sessionRedDot==true"
					:class="[currentIndex==index?'red-dot-active':'red-dot']">
				</view>
				<text>{{item}}</text>
			</view>
			<view class="head-item" @click.stop="isShowSetting = !isShowSetting">
				<image src="https://images.linglinggong.net/static/icon/setting.png" mode=""></image>
			</view>
		</view>
		<view class="notice" v-show="currentIndex==0">
			<view class="module-list">
				<view class="module-item" v-for="(item,index) in moduleList" @click="jump(index+3)">
					<view :class="['item-img',`item-img${index+1}`]">
						<image :src="`https://images.linglinggong.net/static/message/message${index+1}.png`" mode="">
						</image>
						<view v-if="notifyRedDot&&index==0" class="red-dot-notify"></view>
					</view>
					<text>{{item}}</text>
				</view>
			</view>
			<view class="message-item" v-if="realNameAuthentication" @click="jump(6)">
				<view class="red-dot">
				</view>
				<view class="row1">
					<view class="img">
						<image style="width: 31rpx;height: 27rpx;"
							src="https://images.linglinggong.net/static/message/message9.png" mode=""></image>
					</view>
					<text>实名认证</text>
					<text>{{realMessageTime}}</text>
				</view>
				<view class="row2">未实名认证，请前往实名认证，解锁更多个人权益 </view>
				<view class="row3"> 前往认证 <uni-icons type="forward" size="12" color="#1A1A1A"></uni-icons> </view>
			</view>
			<view class="message-item" v-if="userNotice&&!realNameAuthentication" @click="jump(7)">
				<view class="red-dot" v-if="userNotice.status==0">
				</view>
				<view class="row1">
					<view class="img">
						<image src="https://images.linglinggong.net/static/message/message3.png" mode=""></image>
					</view>
					<text>{{userNotice.title}}</text>
					<text>{{userNotice.dateFormat ? userNotice.dateFormat : ''}}</text>
				</view>
				<view class="row2">{{userNotice.content}} </view>
			</view>
			<view v-if="!userNotice&&!realNameAuthentication" class="empty">
				<image src="https://images.linglinggong.net/static/message/message5.png" mode=""></image>
			</view>
		</view>
		<view class="action" v-show="currentIndex==1">
			<view class="hot-action">
				<view class="reward" @click="jump(8)">
					<image src="https://images.linglinggong.net/static/message/message11.png" mode=""></image>
					<text>领取奖励</text>
				</view>
				<view class="title"> 热门活动 </view>
				<image @click="jump(9)" :src="`https://images.linglinggong.net/${hotActionImg}`" mode=""></image>
			</view>
			<view class="list">
				<view class="list-item" v-for="item in actionList" @click="mark_as_read(item.id,item.jumpUrl)">
					<view class="time">
						{{item.dateFormat ? item.dateFormat : ''}}
					</view>
					<view class="card">
						<view v-if="item.status==0" class="red-dot">
						</view>
						<image :src="`https://images.linglinggong.net/${item.image}`" mode=""></image>
						<view>
							{{item.content}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import time from '@/libs/time-date.js'
	export default {
		data() {
			return {
				isShowSetting: false,
				currentIndex: 0,
				color: '#F85A41',
				titleList: ['通知', '活动', '会话'],
				moduleList: ['服务通知', '学习培训', '平台规则'],
				requestObj: {
					pageNum: 1,
					pageSize: 100,
					plate: 1
				},
				realMessageTime: '',
				userNotice: {},
				realNameAuthentication: false,
				notifyRedDot: false, // 通知红点
				activityRedDot: false, // 活动红点
				sessionRedDot: false, // 会话红点
				actionList: [], // 热门活动
				hotActionImg: '', // 热门活动图片
				hotActionPath: '' // 热门活动跳转地址
			}
		},
		methods: {
			async mark_as_read(id, path) {
				let res = await this.$fetch(this.$api.mark_as_read, {
					id: id
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				uni.navigateTo({
					url: path
				})
			},
			handleTypeChange(index) {
				if (index == 2) {
					uni.navigateTo({
						url: '/pages/onLinePage/kefu'
					})
				} else {
					this.currentIndex = index
				}
			},
			jump(val) {
				if (val == 1) {
					this.isShowSetting = false
					uni.navigateTo({
						url: '/pages/onLinePage/kefu?userId=' + uni.getStorageSync('userInfo').userId
					})
				} else if (val == 2) {
					this.isShowSetting = false
					uni.navigateTo({
						url: '/pages/message/message-setting'
					})
				} else if (val == 3) {
					uni.navigateTo({
						url: '/pages/message/message-list'
					})
				} else if (val == 4) {
					uni.navigateTo({
						url: '/pages/help/help'
					})
				} else if (val == 5) {
					uni.showToast({
						title: '该功能暂未开放',
						icon: 'none'
					})
				} else if (val == 6) {
					uni.navigateTo({
						url: '/pages/real-name/real-name'
					})
				} else if (val == 7) {
					uni.navigateTo({
						url: `/pages/message/message-detail?id=${this.userNotice.id}`
					})
				} else if (val == 8) {
					if (uni.getStorageSync('userType') == 0) {
						uni.navigateTo({
							url: '/pages/sendCode/list'
						})
					} else {
						uni.navigateTo({
							url: '/pages/app-employer/my-coupon/my-coupon'
						})
					}
				} else if (val == 9) {
					uni.navigateTo({
						url: this.hotActionPath
					})
				}
			},
			async get_push_msg_list() {
				let res = await this.$fetch(this.$api.get_push_message_records_list, this.requestObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.actionList = res.rows
			},
			async get_push_message_records() {
				let res = await this.$fetch(this.$api.get_push_message_records, {}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.userNotice = res.data.userNotice
				this.realNameAuthentication = res.data.realNameAuthentication
				this.notifyRedDot = res.data.notifyRedDot
				this.activityRedDot = res.data.activityRedDot
				this.sessionRedDot = res.data.sessionRedDot
			},
			async get_popular_activities() {
				let res = await this.$fetch(this.$api.get_popular_activities, {}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.hotActionPath = res.data.link
				this.hotActionImg = res.data.image
			},
			async readed() {
				let res = await this.$fetch(this.$api.one_click_read, {}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.isShowSetting = false
				this.get_push_message_records()
				this.get_popular_activities()
				this.get_push_msg_list()
			}
		},
		onShow() {
			this.get_push_message_records()
			this.get_popular_activities()
			this.get_push_msg_list()
			let timer = new Date()
			this.realMessageTime = time(timer).slice(10, 16)
		},
		onNavigationBarButtonTap() {
			this.isShowSetting = !this.isShowSetting
		},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
	}
</script>
<style lang="less">
	.container {
		background-color: #F1F1F5;
		position: relative;
		min-height: 90vh;

		&>.more {
			position: fixed;
			top: 42rpx;
			right: 0;
			z-index: 999;
			height: 58rpx;
			line-height: 58rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, .7);
			border-radius: 30rpx 0rpx 0rpx 30rpx;
			padding: 0 30rpx;
		}

		&>.fixed-settting {
			position: fixed;
			top: 80rpx;
			right: 60rpx;
			z-index: 9999;
			width: 244rpx;
			height: 292rpx;
			padding: 40rpx 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			box-shadow: rgba(0, 0, 0, 0.16) 0 10rpx 20rpx 2rpx;

			&>.setting-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #262626;
				font-size: 32rpx;
				font-weight: bold;

				&>image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		&>.fixed-settting::before {
			content: '';
			width: 0;
			height: 0;
			border: 20rpx solid transparent;
			border-bottom-color: #FFFFFF;
			position: absolute;
			top: 0;
			right: 10rpx;
			margin-top: -40rpx;
		}

		&>.head-list {
			position: fixed;
			z-index: 99;
			width: 100%;
			top: -6rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: #262626;
			font-size: 28rpx;

			&>.head-item {
				padding: 20rpx 0;
				position: relative;

				&>.red-dot {
					position: absolute;
					left: 50rpx;
					top: 22rpx;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #F85A41;
					box-shadow: rgba(248, 90, 65, 0.50) 0 2rpx 6rpx 2rpx;
				}

				&>image {
					width: 56rpx;
					height: 56rpx;
				}
			}

			&>.active {
				font-size: 32rpx;
				font-weight: bold;
				border-bottom: 6rpx solid #FF851D;

				&>.red-dot-active {
					position: absolute;
					left: 56rpx;
					top: 18rpx;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #F85A41;
					box-shadow: rgba(248, 90, 65, 0.50) 0 2rpx 6rpx 2rpx;
				}
			}
		}

		&>.notice {
			&>.module-list {
				background-color: #FFFFFF;
				width: 690rpx;
				height: 180rpx;
				margin: 108rpx auto 30rpx auto;
				border-radius: 16rpx;
				padding: 20rpx 46rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				&>.module-item {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					&>.item-img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;

						&>.red-dot-notify {
							position: absolute;
							right: 0rpx;
							top: 0rpx;
							width: 12rpx;
							height: 12rpx;
							border-radius: 50%;
							background-color: #F85A41;
							box-shadow: rgba(248, 90, 65, 0.50) 0 2rpx 6rpx 2rpx;
						}
					}

					&>.item-img1 {
						background-color: #0AA1F4;
						box-shadow: rgba(10, 161, 244, 0.40) 0 4rpx 8rpx 2rpx;

						&>image {
							width: 44rpx;
							height: 51rpx;
						}
					}

					&>.item-img2 {
						background-color: #4DCC99;
						box-shadow: rgba(77, 204, 153, 0.40) 0 4rpx 8rpx 2rpx;

						&>image {
							width: 50rpx;
							height: 50rpx;
						}
					}

					&>.item-img3 {
						background-color: #FDAD2F;
						box-shadow: rgba(253, 173, 47, 0.40) 0 4rpx 8rpx 2rpx;

						&>image {
							width: 42rpx;
							height: 52rpx;
						}
					}
				}
			}

			&>.message-item {
				width: 690rpx;
				height: 196rpx;
				border-radius: 16rpx;
				background-color: #FFFFFF;
				margin: 20rpx auto;
				padding: 20rpx 20rpx 40rpx 20rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				position: relative;

				&>.red-dot {
					position: absolute;
					left: 58rpx;
					top: 14rpx;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #F85A41;
					box-shadow: rgba(248, 90, 65, 0.50) 0 2rpx 6rpx 2rpx;
				}

				&>.row1 {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;

					&>.img {
						width: 56rpx;
						height: 56rpx;
						background-color: #B3B3B3;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						&>image {
							width: 29rpx;
							height: 34rpx;
						}
					}

					&>text:nth-child(2) {
						margin-left: 10rpx;
						color: #262626;
						font-weight: bold;
						font-size: 28rpx;
						max-width: 300rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					&>text:nth-child(3) {
						margin-left: auto;
					}
				}

				&>.row2 {
					color: #515151;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				&>.row3 {
					color: #262626;
					margin-bottom: 0rpx;
					text-align: right;
				}
			}

			.empty {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 414rpx;
				height: 280rpx;

				&>image {
					width: 100%;
					height: 100%;
				}
			}
		}

		&>.action {
			color: #262626;

			&>.hot-action {
				position: fixed;
				top: 70rpx;
				z-index: 98;
				width: 100%;
				background-color: #f1f1f5;
				padding-bottom: 50rpx;
				padding-top: 40rpx;

				&>.reward {
					position: absolute;
					top: 50rpx;
					right: 0;
					z-index: 99;
					width: 220rpx;
					height: 80rpx;
					border-radius: 100rpx 0rpx 0rpx 100rpx;
					background-color: #FFFFFF;
					box-shadow: rgba(96, 104, 114, 0.16) 0rpx 6rpx 12rpx 2rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30rpx;
					box-sizing: border-box;

					&>image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				&>.title {
					font-size: 36rpx;
					font-weight: bold;
					margin: 40rpx auto 40rpx 30rpx;
					position: relative;
				}

				&>.title::after {
					content: '';
					width: 74rpx;
					height: 22rpx;
					border-radius: 12rpx;
					position: absolute;
					top: 30rpx;
					left: 0rpx;
					z-index: -1;
					background-color: #FCC928;
				}

				&>image {
					width: 660rpx;
					height: 246rpx;
					display: block;
					border-radius: 14rpx;
					margin: 0 auto;
				}
			}

			&>.list {
				margin-top: 560rpx;
				padding-bottom: 60rpx;

				&>.list-item {
					width: 690rpx;
					font-size: 28rpx;
					margin: 40rpx auto;

					&>.time {
						text-align: center;
						margin-bottom: 20rpx;
					}

					&>.card {
						width: 100%;
						background-color: #FFFFFF;
						padding: 20rpx 20rpx 30rpx 20rpx;
						box-sizing: border-box;
						border-radius: 20rpx;
						position: relative;

						&>.red-dot {
							position: absolute;
							top: 6rpx;
							left: 10rpx;
							width: 12rpx;
							height: 12rpx;
							border-radius: 50%;
							background-color: #F85A41;
							box-shadow: rgba(248, 90, 65, 0.50) 0 2rpx 6rpx 2rpx;
						}

						&>image {
							width: 650rpx;
							height: 246rpx;
							margin-bottom: 20rpx;
							border-radius: 14rpx;
						}
					}
				}
			}
		}
	}
</style>